<template>
  <view v-if="loginFlag && hasSchool" class="curriculum">
    <DatePicker @set-date="setDate" />
    <scroll-view v-if="bookList.length" scroll-y="auto" class="list-scroll" @scrolltolower="loadMore">
      <view v-for="item in bookList" :key="item.id" class="curriculum-list">
        <view class="title flex items-center justify-between">
          <view class="left flex items-center">
            <image class="left-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/imgs/images/curriculum/${Number(item.status) === 0 ? 'start' : Number(item.status) === 5 ? 'ing' : Number(item.status) === 7 ? 'finish' : 'abnormal'}.png`" />
            <text class="left-text">
              {{ getStatus(item.status) }}
            </text>
          </view>
          <view class="right">
            {{ `${item.startTime.slice(5, 10)}` }}
          </view>
        </view>

        <view class="content">
          <ReadItem :data="item" />
        </view>
      </view>
    </scroll-view>

    <NoDataPage v-else :status="statusData" />
  </view>

  <NoDataPage v-else :status="statusType" :info-text="!loginFlag ? '暂未登录，立即登录开启阅读之旅吧' : '暂无阅读内容'" :btn-text="!loginFlag ? '登录' : '联系老师看看我应该怎么读书'" />
</template>

<script setup lang="ts">
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import ReadItem from '@/components/read-item/index.vue';
import { getCourseList } from '@/api/read/index';
import type { GetCourseListParams } from '@/api/read/type';
import type { ReadingBookResult } from '@/api/home/type';
import { useUserStore } from '@/store';
import { isLogin } from '@/utils/auth';
import { formatMonth } from '@/utils';

const store = useUserStore();
const loginFlag = ref<boolean>(isLogin());
const hasSchool = computed(() => !!store.schoolId); // 是否绑定门店
const vipData = ref();
const statusType = computed(() => {
  if (!loginFlag.value)
    return 1;
  if (!hasSchool.value)
    return 2;
  return 0;
});
const statusData = computed(() => {
  if (vipData.value?.flag === 2)
    return 3;
  if (vipData.value?.flag === 0)
    return 7;
  if (vipData.value?.flag === 3)
    return 4;
  return 0;
});

const getStatus = (status: string | number) => {
  switch (Number(status)) {
    case 0:
      return '待上课';
    case 1:
      return '读前预告';
    case 2:
      return '请假';
    case 3:
      return '旷课';
    case 4:
      return '未上课';
    case 5:
      return '读书中';
    case 6:
      return '课后练习';
    case 7:
      return '已完成';
    default:
      return '';
  }
};

const pageParams = ref<GetCourseListParams>({
  pageNum: 1,
  pageSize: 10,
  startTime: `${formatMonth()}-01`,
});
const bookList = ref<Array<ReadingBookResult>>([]);
const total = ref<number>(0);
const getList = () => {
  return getCourseList(pageParams.value).then((res: { total: number; rows: Array<ReadingBookResult>; code?: number }) => {
    if (res.code === 5152) {
      vipData.value = res.rows[0];
      return;
    }
    vipData.value = undefined;
    total.value = res.total;
    bookList.value = bookList.value.concat(res.rows);
  });
};

onShow(async () => {
  if (loginFlag.value) {
    pageParams.value.pageNum = 1;
    bookList.value = [];
    getList();
  }
});

onPullDownRefresh(() => {
  pageParams.value.pageNum = 1;
  bookList.value = [];
  getList().then(() => {
    uni.stopPullDownRefresh();
  });
});

onReachBottom(() => {
  if (bookList.value.length >= total.value)
    return;
  pageParams.value.pageNum++;
  getList();
});

const loadMore = () => {
  if (bookList.value.length >= total.value)
    return;
  pageParams.value.pageNum++;
  getList();
};

// 选择的日期
const setDate = async (date: string) => {
  pageParams.value.startTime = `${date}-01`;
  pageParams.value.pageNum = 1;
  bookList.value = [];
  getList();
};

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: store.share_txt,
    imageUrl: store.share_pic_url,
  };
});
</script>

<style lang="scss" scoped>
.curriculum {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .list-scroll {
    flex: 1;
    overflow: auto;
    margin-top: 20rpx;
  }

  .curriculum-list {
    padding: 20rpx 32rpx 40rpx 32rpx;

    .title {
      .left {
        .left-img {
          width: 36rpx;
          height: 36rpx;
        }

        .left-text {
          padding-left: 8rpx;
          font-size: 28rpx;
          line-height: 48rpx;
          color: #000;
        }
      }

      .right {
        font-size: 24rpx;
        color: #888;
      }
    }

    .content {
      padding-top: 64rpx;
    }
  }
}

:deep(.u-line-progress__line) {
  background: rgba(74, 170, 248, 0.6) !important;
}

no-data-page {
  padding-top: 240rpx;
}
</style>
